<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <svg-icon icon-class="good" /><span
              >{{$t('navbar.companyName')}}</span
            >
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span> 操作<i class="el-icon-arrow-down" /> </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="hAdd('')"
                      >添加子部门</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 使用el-tree组件展示主题内容 -->
        <el-tree default-expand-all :data="list">
          <!-- 使用作用域插槽获取组件内部的数据  可以使用提供的默认的作用域插槽  ===>{data}  接收内部数据 -->
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px;width=100%"
            >
              <el-col :span="20">
                <svg-icon icon-class="good" /><span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <!-- 下拉菜单 element -->
                  <el-col>
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="hAdd(data.id)"
                          >添加子部门</el-dropdown-item
                        >
                        <el-dropdown-item @click.native="hEdmit(data.id)"
                          >编辑子部门</el-dropdown-item
                        >
                        <!--v-if="data.children.length === 0"  如果组件有子组件就创建 -->
                        <el-dropdown-item v-if="data.children.length === 0" @click.native="hDel(data.id)">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
      <!-- 新增子部门编辑 或编辑部门   弹窗 -->
      <el-dialog
        :title="isEdit ? '编辑部门' : '新增子部门'"
        :visible.sync="showDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <!-- v-if  第一种方法  可以解决异步数据不更新问题    这是个组件-->
        <addOrEdit v-if="showDialog"  @close="showDialog = false" :id=curid @success="hsuccess" :isEdit="isEdit" :originList="originList"></addOrEdit>

        <!-- 给子组件 设置ref 可以在父组件中调用子组件的所有方法  -->
        <!-- <addOrEdit ref="myAddRef" :id="curid" @success="hsuccess" @close="showDialog = false" :isEdit="isEdit"></addOrEdit> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getDepartments, delDepartments } from "@/api/departments";
import { transDataToTreeData } from "@/utils";
// 导出弹窗子组件
import addOrEdit from "./deptDialog";
export default {
  components: {
    addOrEdit,
  },
  data() {
    return {
      // 依赖一份树形数据
      list: [],
      showDialog: false, //默认让弹窗隐藏
      curid: "", //当前点击的部门id
      isEdit: false, //false 新增||true  编辑
      originList:[]
    };
  },
  created() {
    this.loadDepartments();
  },
  methods: {
    // 删除部门
    hDel(id) {
      this.$confirm("你确定要删除吗??")
        .then(async () => {
          const res = await delDepartments(id);
          console.log(res); //res.code
          if (res.code !== 10000) return this.$message.error(res.message);
          this.$message.success(res.message);
          // 删除完毕  重新渲染数据
          this.loadDepartments();
        })
        .catch((err) => err);
    },

    // 子组件 deptDialog要求父元素帮忙从新渲染页面和关闭弹窗
    hsuccess() {
      // 重新渲染页面
      this.loadDepartments();
      // 关闭弹窗
      this.showDialog = false;
    },
    // 绑定编辑事件 中的方法 拿到id  并保存 和显示弹窗
    hEdmit(id) {
      this.curid = id;
      this.isEdit = true; //编辑状态
      this.showDialog = true;
      // 第2中方法     可以用$nextTick() 解决异步数据的不更新
      // this.$nextTick(()=>{
      //     this.$refs.myAddRef.loadDepartmentDetail()
      // })
    },
    // 绑定添加事件 中的方法 拿到id 并保存 和显示弹窗
    hAdd(id) {
      this.curid = id;
      this.isEdit = false; //添加状态
      this.showDialog = true;
    },
    // 加载部门列表
    // 自定义一个函数
    async loadDepartments() {
      // 调用接口组件的查询函数  发送axios
      try {
        const res = await getDepartments();
        console.log("getDepartments", res); //res.data.depts
        this.originList=res.data.depts.map(item=>{
            return {
                id:item.id,
                pid:item.id,
                code:item.code,
                name:item.name
              }
        })
        // 删除数组中的第一个数据( 公司姓名不需要)
        res.data.depts.shift(); //删除公司的名字
        // transDataToTreeData(res.data.depts)  实现平铺数据转换为树型数据

        this.list = transDataToTreeData(res.data.depts);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.app-container {
  .el-row--flex {
    width: 100%;
  }
}
</style>